<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <title>性别与年龄分布饼图</title>
    <!-- 引入ECharts库 -->
    <script src="./echarts.min.js"></script>
    <style>
        /* 图表容器样式 */
        #chart-container {
            width: 800px;
            height: 600px;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<!-- 图表显示容器 -->
<div id="chart-container"></div>

<script>
    // 初始化ECharts实例，绑定到DOM元素
    var myChart = echarts.init(document.getElementById('chart-container'));

    /**
     * 准备数据
     * 数据结构说明：
     * - 外层为性别分类（男、女）
     * - 内层为各性别下的年龄细分
     * - 每个数据项包含name(名称)和value(值)属性
     */
    var data = [
        // 男性数据
        {
            name: '男',
            value: 65,  // 男性总占比65%
            itemStyle: { color: '#5470c6' },  // 男性主色
            children: [
                {name: '0-18岁', value: 15, itemStyle: { color: '#7b9ce1' }},
                {name: '19-30岁', value: 20, itemStyle: { color: '#3a56b0' }},
                {name: '31-45岁', value: 18, itemStyle: { color: '#1e3b8a' }},
                {name: '46岁以上', value: 12, itemStyle: { color: '#0d2352' }}
            ]
        },
        // 女性数据
        {
            name: '女',
            value: 35,  // 女性总占比35%
            itemStyle: { color: '#ee6666' },  // 女性主色
            children: [
                {name: '0-18岁', value: 8, itemStyle: { color: '#f8a39e' }},
                {name: '19-30岁', value: 12, itemStyle: { color: '#d44a42' }},
                {name: '31-45岁', value: 10, itemStyle: { color: '#a82d26' }},
                {name: '46岁以上', value: 5, itemStyle: { color: '#7a1c17' }}
            ]
        }
    ];

    function color() {
        console.log(this)
        return '7b9ce1'
    }

    /**
     * 配置图表选项
     */
    var option = {
        // 标题配置
        title: {
            text: '性别与年龄分布',
            left: 'center',
            top: 20,
            textStyle: {
                fontSize: 18,
                fontWeight: 'bold'
            }
        },

        // 提示框配置
        tooltip: {
            trigger: 'item',
            formatter: function(params) {
                // 格式化提示框内容
                var name = params.name;
                var value = params.value;
                var percent = params.percent;

                // 判断是否是性别分类还是年龄细分
                if (name.indexOf('-') === -1) {
                    return `<div style="font-weight:bold">${name}</div>占比: ${value}% (${percent}%)`;
                } else {
                    var parts = name.split('-');
                    return `<div>
                            <span style="font-weight:bold">${parts[0]}</span> -
                            <span>${parts[1]}</span>
                        </div>
                        占比: ${value}% (${percent}%)`;
                }
            }
        },

        // 图例配置
        legend: {
            type: 'scroll',  // 可滚动的图例
            orient: 'vertical',
            right: 20,
            top: 'middle',
            textStyle: {
                fontSize: 12
            },
            data: (function() {
                // 生成图例数据，包含所有分类
                var legendData = [];
                data.forEach(function(gender) {
                    legendData.push(gender.name);
                    gender.children.forEach(function(age) {
                        legendData.push(gender.name + '-' + age.name);
                    });
                });
                return legendData;
            })()
        },

        // 系列配置 - 使用多层饼图实现
        series: [
            // 第一层：性别分类（中心圆）
            {
                name: '性别',
                type: 'pie',
                radius: '39%',  // 设置半径
                center: ['50%', '50%'],  // 中心位置
                label: {
                    position: 'inner',  // 标签显示在内部
                    formatter: '{b}\n{d}%',  // 显示名称和百分比
                    fontSize: 14,
                    fontWeight: 'bold'
                },
                labelLine: {
                    show: false  // 不显示标签引导线
                },
                data: data.map(function(gender) {
                    return {
                        name: gender.name,
                        value: gender.value,
                        itemStyle: gender.itemStyle
                    };
                })
            },

            // 第二层：年龄细分（外环）
            {
                name: '年龄分布',
                type: 'pie',
                radius: ['40%', '70%'],  // 设置环形的内外半径
                center: ['50%', '50%'],
                avoidLabelOverlap: true,
                label: {
                    show: true,
                    formatter: function(params) {
                        // 只显示年龄段的名称和百分比
                        return params.name.split('-')[1] + '\n' + params.percent + '%';
                    },
                    fontSize: 12
                },
                labelLine: {
                    show: true,
                    length: 10,
                    length2: 15
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 14,
                        fontWeight: 'bold'
                    }
                },
                data: (function() {
                    // 生成年龄细分数据
                    var ageData = [];
                    data.forEach(function(gender) {
                        gender.children.forEach(function(age) {
                            ageData.push({
                                name: gender.name + '-' + age.name,
                                value: age.value,
                                itemStyle: age.itemStyle
                            });
                        });
                    });
                    return ageData;
                })()
            }
        ]
    };

    // 使用配置项显示图表
    myChart.setOption(option);

    // 窗口大小改变时，重新调整图表大小
    window.addEventListener('resize', function() {
        myChart.resize();
    });
</script>
</body>
</html>